<template>
  <div id="operation" style="position: relative;">
    <div class="wrap">
      <div id="printJS-form">
        <div class="printJS-item">
          <div class="infoTitle">磅单基础信息</div>
          <div class="table-wrap">
            <div class="table-item">
              <div class="item-label">电子磅单ID</div>
              <div class="item-right">{{weightInfo.trackScaleId}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">地磅关联项目</div>
              <div class="item-right" :title="weightInfo.projectName">{{weightInfo.projectName}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">磅单推送时间</div>
              <div class="item-right" >{{weightInfo.createTime}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">磅单流水号</div>
              <div class="item-right">{{weightInfo.weightSerial}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">车牌号</div>
              <div class="item-right">{{weightInfo.carNum?weightInfo.carNum:'--'}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">司称员</div>
              <div class="item-right">{{weightInfo.driverName?weightInfo.driverName:'--'}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">入场日期</div>
              <div class="item-right">{{weightInfo.dataTime?weightInfo.dataTime:'--'}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">入场时间</div>
              <div class="item-right">{{weightInfo.inTime?weightInfo.inTime:'--'}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">出场时间</div>
              <div class="item-right">{{weightInfo.outTime?weightInfo.outTime:'--'}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">总重</div>
              <div class="item-right">{{weightInfo.totalWeight?weightInfo.totalWeight:'--'}} kg</div>
            </div>
            <div class="table-item">
              <div class="item-label">空重</div>
              <div class="item-right">{{weightInfo.emptyWeight?weightInfo.emptyWeight:'--'}} kg</div>
            </div>
            <div class="table-item">
              <div class="item-label">净重</div>
              <div class="item-right">{{weightInfo.netWeight?weightInfo.netWeight:'--'}} kg</div>
            </div>
            <div class="table-item">
              <div class="item-label">方数</div>
              <div class="item-right">{{weightInfo.cubicNumber?weightInfo.cubicNumber:'--'}} m³</div>
            </div>
            <div class="table-item" style="width:calc(100% - 33.33%)">
              <div class="item-label">关联发货单号</div>
              <div class="item-right">{{weightInfo.orderDeliveryId?weightInfo.orderDeliveryId:'--'}}</div>
            </div>
          </div>
          <div class="flex imgWrap">
            <div class="" style="" >
              <span class="label">车头照片：</span>
              <img class="img-item" :src="weightInfo.pic1?weightInfo.pic1:require('@/assets/images/noImg.png')" @click="weightInfo.pic1?showImg(0):''" />
            </div>
            <div class="" style="margin:0 20px 20px 0;">
              <span class="label">车尾照片：</span>
              <img class="img-item" :src="weightInfo.pic2?weightInfo.pic2:require('@/assets/images/noImg.png')" @click="weightInfo.pic2?showImg(1):''" />
            </div>
            <div class="" style="margin:0 20px 20px 0;">
              <span class="label">车厢照片：</span>
              <img class="img-item" :src="weightInfo.pic3?weightInfo.pic3:require('@/assets/images/noImg.png')" @click="weightInfo.pic3?showImg(2):''" />
            </div>
            <div class="" style="margin:0 20px 20px 0;">
              <span class="label">空车照片：</span>
              <img class="img-item" :src="weightInfo.pic4?weightInfo.pic4:require('@/assets/images/noImg.png')" @click="weightInfo.pic4?showImg(3):''" />
            </div>
          </div>
        </div>
        <div class="printJS-item">
          <div class="infoTitle">关联验收单号</div>
          <div class="tableWrap">
            <DataTable rowKey="checkId" :showConfig="false" :tableData="Data" :tableColumn="tableColumn" />
          </div>
        </div>
      </div>
    </div>

  </div>

</template>
<script lang='ts'>
import { Confirm, Validate } from '@/decorator';
import { Component, Watch, Vue } from 'vue-property-decorator';
import print from 'print-js'


@Component
export default class operation extends Vue {
  ourWeight:any = '' // 磅单数据
    weightInfo:any = ''
    preVisible: boolean = false
    Data:any=[]
    tableColumn: any = {
        index: {
            label: '序号',
            width: 120
        },
        deliverySn: {
            label: '验收单号'
        },
        projectName: {
            label: '所属项目'
        },
        deliveryTime: {
            label: '验收时间'
        },
        action: {
            label: '操作',
            width: 120,
            template: [
                {
                tag: 'router-link',
                text: '验收记录',
                query: {
                    _alias: 'detail',
                    checkId: ''
                },
                path: '/acceptance/acceptanceList/operation'
                }
            ]
        }
  }
  init () {
    const {_alias: alias, weightId: id} = this.$route.query
    this.id = id as string
    this.alias = alias as string
    this.getDetail()
  }
  showImg (index:any) {
    this.$viewerApi({
      options: {
        initialViewIndex: index
      },
      images: [this.weightInfo.pic1, this.weightInfo.pic2, this.weightInfo.pic3, this.weightInfo.pic4]
    })
      // this.$hevueImgPreview({
      //   multiple: true,
      //   nowImgIndex: index,
      //   imgList: [this.weightInfo.pic1, this.weightInfo.pic2, this.weightInfo.pic3, this.weightInfo.pic4]
      // })
  }
  getDetail () {
    this.$api.weightWeightDetailFetch({weightId: this.id}).then(({ data }: any) => {
        this.weightInfo = data.weight
        data.deliveryList.map((item:any, index:any) => {
            item.index = (index + 1)
        })
        this.Data = data.deliveryList
    })
  }
}
</script>
<style lang='scss' scoped>
.form-btn {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  z-index:999999;
  .btn {
    margin: 10px 10px 0 0;
  }
}
.wrap{
  // margin: 0 20px;
  min-width: 960px;
  min-height: calc(100vh - 203px);
  padding: 0 25px;
  #printJS-form{
    .printJS-item{
      background: #fff;
      margin-bottom: 20px;
      border-radius: 8px;
      .stepWrap{
        padding:30px 24px;
        display: flex;
        .step-left{
          width: 58%;
          padding-right: 40px;
        }
        .step-right{
          border-left: 1px solid #ccc;
          padding: 4px 26px;
          color: rgba(0, 0, 0, 0.45);
          font-size:14px;
        }
      }
      .infoTitle{
        padding:24px;
        border-bottom: 1px solid #D8D8D8;
        font-size: 16px;
        color:#333333;
        font-weight: bold;
        position: relative;
        &::after{
          content: '';
          width: 4px;
          height: 20px;
          background: #437DFC;
          position:absolute;
          top:50%;
          left: 0;
          margin-top: -10px;
          border-radius: 6px;
        }
      }
      .form-row{
        padding: 24px 24px 14px;
        display: flex;
        flex-wrap: wrap;
          .form-col {
            width: 25%;
            flex-shrink: 0;
          }
      }
      /deep/ .ant-form-item{
        margin-bottom: 10px;
      }
      .tableWrap{
        padding:30px 24px
      }
      .table-wrap{
        width: 1000px;
        display:flex;
        flex-wrap: wrap;
        // margin-bottom: 20px;
        padding: 30px 24px;
        .table-item{
          width:33.33%;
          display: flex;
          align-items: center;
          height: 50px;
          border: 1px solid #d9d9d9;
          .item-label{
            display: flex;
            align-items: center;
            padding: 0 8px;
            width: 122px;
            border-right: 1px solid #d9d9d9;
            background: rgb(244, 244, 244);
            font-weight: bold;
            text-align: center;
            height: 48px;
          }
          .item-right{
            cursor: pointer;
            padding: 0 8px;
            width: calc(100% - 122px);
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
      .imgWrap{
        padding:0 24px;
        div{
          margin:0 20px 20px 0;
          .label{
            font-size: 14px;
            color: #000000;
          }
          .img-item{
            width:220px;
            height: 220px;
            margin: 10px 10px 10px 0;
          }
        }
      }
      .ysccWrap{
        padding:24px;
        .ysqk-item{
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          .label{
            color: #000000;
            font-size: 14px;
          }
          .ysqk-text{
            width: 1148px;
            height: 104px;
            margin-top: 10px;
            padding: 14px 20px;
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.15);
            font-size: 14px;
            color: #000;
          }
        }
        .ysqk-img{
          display: flex;
          .ysqk-img-l{
            display: flex;
            flex-direction: column;
            div{
              display:flex;
              img{
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
          .ysqk-img-r{
            display: flex;
            flex-direction: column;
            div{
              display: flex;
              flex-wrap: wrap;
              img{
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
        }
        .img-item{
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
      .pic-wrap{
        padding:15px 24px 40px;
        .img-item{
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
    }
  }
}
.printModalWrap{
  width: 100%;
  margin-bottom: 20px;
  // min-height: 500px;
  border: 1px solid #8a8a8a;
  .print-title{
    line-height: 44px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid #8a8a8a;
  }
  .print-middle{
    padding: 10px 15px;
    display: flex;
    border-bottom: 1px solid #8a8a8a;
    .middle-left{
      width: calc(100% - 250px);
      display: flex;
      flex-wrap: wrap;
      .middle-left-item{
        width: 30%;
        line-height: 26px;
        padding-right: 10px;
      }
    }
    .middle-right{
      width: 250px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .logo-img{
        width: 80px;
      }
    }
  }
  .print-table{
    padding: 10px 15px;
    .print-table-bottom{
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      .table-bottom-left{
        display: flex;
      }
      .table-bottom-right{
        padding-right: 50px;
      }
    }
    .paperInvoice{
      display:flex;
      .paper-label{
        font-size: 14px;
      }
      img{
        width: 150px;
        height: 150px;
      }
    }
  }
}
.print-bottom{
    display: flex;
    justify-content: center;
  }
.pic-wrap{
  display: flex;
  flex-wrap: wrap;
}
.dif{
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}
/deep/ .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item-description {
    max-width: 300px !important;
    white-space: normal;
}
.dialog_bottom{
  cursor: pointer;
  margin-top: 10px;
  width:100%;
  height:50px;
  display: flex;
  justify-content: center;
  align-items: center;
  div{
    display: flex;
    justify-content: center;
    align-items: center;

    .dialog_pic{
      width:48px;
      height:48px;
      margin-right: 10px;
    }
  }

}
</style>
